<template>
    <div class="vk-warp" id="vk-warp">
      <div class="vk-model">
          <div class="vk-form">
              <div class="vk-item text-center">
              <div class="vk-icon">
                  <img src="../assets/mhj.png">
              </div>
              <label>宁波美好家会员</label>
              </div>
              <div class="vk-item text-center" style="font-size:26px">
                  <span>积分</span>
                  <span style="font-weight:lighter">|</span>
                  <span style="font-weight:bold">{{bonus}}</span>
              </div>
              <div class="vk-item">
                  <span>姓名</span>
                  <span class="vk-right">{{name}}</span>
              </div>
              <div class="vk-item" style="padding-top: 5px">
                  <span>手机号</span>
                  <span class="vk-right">{{phone}}</span>
              </div>
              <div class="vk-item" style="padding-top: 5px">
                  <span>会员号</span>
                  <span class="vk-right">{{cardNo}}</span>
              </div>
              <div class="vk-footer">
                  <span>如需修改资料,请联系客服人员</span>
              </div>
          </div>
        <div class="footer">万科企业股份有限公司©版权所有</div>
    </div>
    </div>
</template>

<script>
import { XInput, XButton, Group, Cell, Popup, PopupPicker } from "vux";

export default {
  components: {
    Popup,
    XInput,
    XButton,
    Group,
    Cell,
    PopupPicker
  },
  data() {
    return {
      msg: "Hello World!",
      show: false,
      phone: "",
      cardNo: "",
      name: "",
      bonus: ""
    };
  },
  methods: {
    getInfo() {
      let info = JSON.parse(localStorage.getItem("wxMemberInfo"));
      console.log(info);
      let str = info.telephone;
      this.bonus = info.bonus;
      this.name = info.memberNameChn;
      this.phone = str.substr(0, 3) + "****" + str.substr(7);
      this.cardNo = info.memberCode;
    }
  },
  created() {
    document.title = "我的卡包";
    // 显示
    this.$vux.loading.show({
      text: "加载中"
    });
    this.getInfo();
  },
  mounted() {
    document.getElementById("vk-warp").style.minHeight =
      document.body.clientHeight + "px";
    // 隐藏
    this.$vux.loading.hide();
  }
};
</script>

<style lang="less" scoped>
@import "~vux/src/styles/close.less";
.vk-warp {
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
  width: 100%;
  height: 100%;
  background: url("../assets/images/bg.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  .vk-model {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.vk-form {
  margin: 20px 20px 0 20px;
  padding: 10px 15px;
  background: url("../assets/images/2x/card_vertical.png") no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  .vk-icon {
    position: absolute;
    left: 15px;
    width: 50px;
    height: 50px;
    line-height: 48px;
    border-radius: 50px;
    background: #ffffff;
    text-align: center;
    img {
      vertical-align: middle;
      width: 38px;
    }
  }
  .vk-label {
    display: block;
  }
  .vk-right {
    position: absolute;
    right: 15px;
  }
  .vk-item {
    position: relative;
    color: #754900;
    padding: 15px 15px 0 15px;
    height: 50px;
    line-height: 50px;
  }
  .text-center {
    text-align: center !important;
  }
  .vk-footer {
    margin-top: 35px;
    margin-bottom: 8px;
    color: #754900;
    font-size: 12px;
    text-align: center;
  }
}
.footer {
  color: #ffffff;
  width: 100%;
  opacity: 0.7;
  font-weight: lighter;
  text-align: center;
  font-size: 12px;
  position: fixed;
  bottom: 20px;
}
</style>
